<template>
  <h3>创建页面</h3>
  <a-form :model="form" :label-col="{
        span: 4,
      }" :wrapper-col="{
        span: 14,
      }">


    <a-form-item label="Activity time">
      <a-date-picker
          v-model:value="form.date"
          show-time
          type="date"
          placeholder="选择计划的日期"
          style="width: 100%"
      />
    </a-form-item>
    <a-form-item label="请选择耗时：">
      <a-input-number id="inputNumber" v-model:value="form.time" :min="1" :max="10" />
    </a-form-item>
    <a-form-item label="待办事项：">
      <a-textarea
          v-model:value="form.content"
          placeholder="请输入待办事项："
          :auto-size="{ minRows: 2, maxRows: 5 }"
      />
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="onSubmit">Create</a-button>
      <a-button style="margin-left: 10px">Cancel</a-button>
    </a-form-item>
  </a-form>
</template>
<!-- section script-->
<script>
import {defineComponent, reactive, toRaw, toRefs} from 'vue';
import moment from 'moment';
export default defineComponent({
  setup(prop, context) {

    const state = reactive({
      form: {
        date:moment(Date.now()).format('YYYY-MM-DD'),
        time: 0,
        content: ''
      }
    })
    const onSubmit = () => {
      context.emit('handlePlan', state.form)
    };

    return {
      ...toRefs(state),
      onSubmit,
    };
  },
});
</script>